// select自定义弹层
import React, { Component } from 'react';
import { Select } from '@teamix/ui';
import Overlay from './overlay.jsx';
import './index.scss';

const popupProps = {
  triggerClickKeycode: [13, 32, 40], // space, enter, down-arrow
};
export default class CustomizedSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isPopupVisible: false,
    };
  }

  handleSelect = (item) => {
    this.setState({
      isPopupVisible: false,
    });
    this.props.onChange(item.value);
  };

  onVisibleChange = (visible) => {
    this.setState({
      isPopupVisible: visible,
    });
  };

  render() {
    const { customizedItemRender, popupClassName, ...originProps } = this.props;
    const PopupContent = (
      <Overlay
        onChange={this.handleSelect}
        data={this.props.dataSource}
        customizedItemRender={customizedItemRender}
        popupClassName={popupClassName}
        value={this.props.value}
      />
    );
    return (
      <Select
        {...originProps}
        visible={this.state.isPopupVisible}
        onVisibleChange={this.onVisibleChange}
        popupProps={popupProps}
        popupContent={PopupContent}
      />
    );
  }
}
